<template>
  <section class="ring-wrapper" :ref="id" :id="id">

  </section>
</template>

<script>
import echarts from "../echarts/index";
export default {
    name:"Ring",
  props: ["id", "list"],
  created() {
    this.$nextTick(() => {
      this.renderEchart();
    });
  },
  watch: {
    list: {
      handler(newVal) {
        if (newVal) {
          this.initData();
          this.$nextTick(() => {
            this.renderEchart();
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  
  methods: {
    initData() {
      console.log(this.list,"ring");
    },
    renderEchart() {
      //2.初始化
      var obj = document.getElementById(this.id)
      const chart = echarts.init(obj);
      const option = {
        color: this.list.color,
        series: [
            {
                type: "pie",
                radius: ["45%", "55%"],
                itemStyle: {
                    borderRadius: 10,
                    borderWidth: 2
                },
                label: {
                    show: true,
                    position: "out",
                    formatter: function(data){
                      var format = [];
                        format.push('{title|'+data.name+'}')
                        if (data.dataIndex>3) {
                          format.push('{num3|'+data.value+'笔}')
                        } else{
                          format.push('{num'+data.dataIndex+'|'+data.value+'笔}')
                        }
                      return format.join("\n")
                    },
                    rich: {
                        title: {
                          color: '#fff',
                          fontSize: "15",
                          padding: 5
                        },
                        num0: {
                          color:this.list.color[0],
                          fontSize: "15",
                          padding: 5
                        },
                        num1: {
                          color:this.list.color[1],
                          fontSize: "15",
                          padding: 5
                        },
                        num2: {
                          color:this.list.color[2],
                          fontSize: "15",
                          padding: 5
                        },
                        num3: {
                          color:this.list.color[3],
                          fontSize: "15",
                          padding: 5
                        },
                    }
                },
                emphasis: {
                    scale:false,
                    label: {
                      show: true,
                    }
                },
                labelLine: {
                    show: false
                },
                markPoint:{
                    symbol: "circle",
                    itemStyle:{
                      opacity:1,
                      color:"transparent"
                    },
                    label:{
                      show:true,
                      position: "inside",
                      formatter: [
                          '{title|{b}}',
                          '{num|{c}笔}'
                      ].join('\n'),
                      rich: {
                          title: {
                            color: "#fff",
                          },
                          num: {
                            color:"#20debc",
                            textAlign: "center",
                            padding: 10
                          },
                      }
                    },
                    data: this.list.mark,
                },
                data:this.list.list,
                // data: [
                //   { value: 2204, name: "高压故障" },
                //   { value: 2217, name: "低压故障" },
                //   { value: 1353, name: "电能质量" },
                //   { value: 1217, name: "计量故障" }
                // ]
            }
        ],
        
      };

      // setInterval(function () {
      //   option.series[0].pointer.show = false;
      //   chart.setOption(option, true);
      // }, 1000);
      chart.setOption(option, true);
      // 自动调节echarts的大小
      window.addEventListener("resize", () => {
        chart.resize();
      });
      // 销毁调节echarts的大小
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", () => {
          chart.resize();
        });
      });
    },
  },
};
</script>

<style lang="scss">
.ring-wrapper {
  width: 100%;
  height: 100%;
}
</style>